<template>
  <view>
    <view class="px-[32rpx] py-[24rpx]">
      <view class="">
        <view class="flex items-center justify-between mb-[24rpx]">
          <view class="text-[32rpx] font-bold">{{detail.title}}</view>
          <up-icon name="more-dot-fill" color="#000" size="48rpx" @click="NotInterested"></up-icon>
        </view>
        <view class="rounded-[16rpx] overflow-hidden">
          <up-swiper :list="detail.pic" v-if="!detail.video" height="384rpx" ></up-swiper>
          <video :src="detail.video" class="w-full h-[384rpx]" v-else />
        </view>
        <view class="text-[26rpx] mt-[24rpx] mb-[16rpx]">
          <text>{{ detail.brief }}</text>
        </view>
        <view class="text-[22rpx] px-[16rpx] py-[22rpx] flex items-center justify-between">
          <view class="flex items-center">
            <up-icon name="share-square" color="#333" size="36rpx"></up-icon>
            <view>转发</view>
          </view>
          <view class="flex items-center" @click="GiveLike">
            <up-icon name="thumb-up" v-if="detail.isLiked" color="#46A7FD" size="36rpx"></up-icon>
            <up-icon name="thumb-up" v-else color="#333" size="36rpx"></up-icon>
            <view :class="detail.isLiked ? 'text-[#46A7FD]' : ''">点赞</view>
          </view>
        </view>
        <view class="border-b border-[#E5E5E5] mt-[16rpx]"></view>
      </view>
    </view>
    <view class="mt-[40rpx] px-[32rpx]">
      <view class="text-black text-[26rpx]">共1条评论</view>
      <view class="flex items-center mt-[24rpx]" @click="pinglun">
        <view class="w-[76rpx] h-[76rpx] flex-shrink-0 mr-[24rpx]">
          <up-image src="" width="100%" height="100%" shape="circle"></up-image>
        </view>
        <view class="flex-1 text-[22rpx] text-[#999] bg-[#F7F7F7] px-[24rpx] py-[20rpx] rounded-[16rpx]">
          说点什么评论一下吧~
        </view>
      </view>
      <view class="mt-[40rpx]">
        <view class="flex" v-for="(item,index) in shareList" :key="index">
          <view class="w-[76rpx] h-[76rpx] flex-shrink-0 mr-[24rpx]" @click="checkShareItem(item.id)">
            <up-image :src="item.userAvatar" width="100%" height="100%" shape="circle"></up-image>
          </view>
          <view class="text-[26rpx] flex-1">
            <view class="text-[#666] mt-[10rpx]" @click="checkShareItem(item.id)">{{ item.userNick }}</view>
            <view class="mt-[24rpx] leading-[40rpx]" @click="checkShareItem(item.id)">
              <text class="text-black">{{ item.content }}
              </text>
              <text class="text-[#666] text-[22rpx]">{{ item.createTime }}</text>
            </view>
            <view v-if="item.commentsList">
              <view class="flex mt-[24rpx]" v-for="(it,el) in item.commentsList" :key="el">
                <view class="w-[76rpx] h-[76rpx] flex-shrink-0 mr-[24rpx]">
                  <up-image src="" width="100%" height="100%" shape="circle"></up-image>
                </view>
                <view class="text-[26rpx] flex-1">
                  <view class="text-[#666] mt-[10rpx]">用户昵称</view>
                  <view class="mt-[24rpx] leading-[40rpx]"><text
                      class="text-black">我们总以为是生活欠我们一个满意，其实，是我们欠生活一个努力。</text>
                    <text class="text-[#666] text-[22rpx]">12-2</text>
                  </view>
                </view>
              </view>
              <view class="text-primary py-[24rpx] border-b border-[#eee]">展开2条回复</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed z-10 h-[120rpx] w-full bg-white opacity-0 px-[32rpx] py-[24rpx] boxShadow transition-opacity"
      :style="{ bottom: keyboardHeight + 'px', opacity: isShowInput ? 1 : 0 }">
      <view class="w-full h-full relative flex items-center">
        <input v-model="comment" confirm-type="send" @keyboardheightchange="keyboardheightchange" type="text"
          class="w-full h-full bg-[#F7F7F7] rounded-full pl-[24rpx] pr-[144rpx] box-border" placeholder="说点什么评论一下吧~"
          @confirm="handleConfirm" @blur="handleBlur" :focus="isShowInput" />
        <view class="send-btn" @click.stop="handleConfirm">发送</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import env from "@/config/common.js";
import { onLoad } from "@dcloudio/uni-app";
import { knowledgeComment, knowledgeDetails, knowledgeOperation, userReview } from "../../API/knowledge";
const baseUrl = env.API_BASE_URL_DEV
const {
  pageObj,
  shareList,
  keyboardHeight,
  keyboardheightchange,
  comment,
  handleConfirm,
  handleBlur,
  isShowInput,
  reviewList,
  checkShareItem,
  pinglun,
  ItemObj
} = useComment(); // 评论
const { id , detail , getDetail , GiveLike , NotInterested } = useDetail(); // 详情
/**
 * @description 评论
 * @returns {Object} comment 评论
 * @returns {Number} keyboardHeight 键盘高度
 * @returns {Boolean} isShowInput 是否显示输入框
 * @returns {Function} keyboardheightchange 监听键盘高度
 * @returns {Function} handleConfirm 发送评论
 * @returns {Function} handleBlur 失去焦点
 */
function useComment() {
  const superiorsId = ref("")
  const comment = ref(""); // 评论
  const recoverId = ref("")
  const ItemObj = ref({})
  const keyboardHeight = ref(0); // 键盘高度
  const isShowInput = ref(false); // 是否显示输入框
  const pageObj = reactive({
    pageNum: 1,
    pageSize: 10,
    pid:0,
    sharingId:''
  })
  const shareList = ref([])
  // 监听键盘高度
  const keyboardheightchange = (e) => {
    keyboardHeight.value = e.detail.height;
  };
  // 发送评论
  const handleConfirm = async () => {
    let { data } = await knowledgeComment({
      pid:ItemObj.value.id,
      content:comment.value,
      sharingId:id.value,
      recoverId:ItemObj.value.recoverId
    })
    isShowInput.value = false;
  };
  // 失去焦点
  const handleBlur = () => {
    keyboardHeight.value = 0;
    isShowInput.value = false;
  };
  const reviewList = async () => {
    let { rows , total } = await userReview(pageObj)
    shareList.value = rows
    // total.value = total
  };
  const checkShareItem = (item)=>{
    ItemObj.value = item
    isShowInput.value = true
  };
  const pinglun = ()=>{
    superiorsId.value = 0
    recoverId.value = 0
    isShowInput.value = true
  }
  return {
    pageObj,
    comment,
    keyboardHeight,
    keyboardheightchange,
    isShowInput,
    handleConfirm,
    handleBlur,
    reviewList,
    shareList,
    checkShareItem,
    superiorsId,
    pinglun,
    recoverId,
    ItemObj
    // total
  };
}
function useDetail(){
  const id = ref(""); // 知识分享id
  const detail = ref({}); // 知识分享详情
  const getDetail = async (id) => {
    let { data } = await knowledgeDetails(id)
    data.pic = data.pic.map(item=>{
      item = baseUrl+item
      return item
    })
    detail.value = data
  }
  const NotInterested = () => {
    uni.showModal({
      title: "提示",
      content: "确定不再关注该知识分享吗？",
      success: async (res) => {
        if(res.confirm){
          let res = await knowledgeOperation({sharingId:id.value,status:1})
          await getDetail(id.value)
        }
      }
    })
  }
  async function GiveLike(){
    let res = await knowledgeOperation({sharingId:id.value,status:0})
    await getDetail(id.value)
  }
  return {id , detail , getDetail , GiveLike , NotInterested }
}
onLoad(async (options)=>{
  id.value = options.id
  pageObj.sharingId = options.id
  await getDetail(id.value)
  await reviewList()
})
</script>

<style lang="scss" scoped>
.boxShadow {
  box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
}

.send-btn {
  @apply absolute z-10 right-[4rpx] text-white text-[26rpx] font-bold bg-primary w-[120rpx] h-[60rpx] flex items-center justify-center rounded-full;
}
</style>
